<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${static_url}/ui/app/assets/js/plugin/jcarousellite/jquery.easing-1.3.js"></script>
<script src="${static_url}/ui/app/assets/js/plugin/jcarousellite/jquery.mousewheel-3.1.12.js"></script>
<script src="${static_url}/ui/app/assets/js/plugin/jcarousellite/jquery.jcarousellite.min.js"></script>
<script>
  function setImg(src){
    $("#product-img img").attr("src", src);
  }
  $(function() {
    $(".pro-gallery-thumbs").jCarouselLite({
      btnNext: ".pro-gallery-forward",
      btnPrev: ".pro-gallery-back",
      speed: 800,
      easing: "easeOutBack"
    });
    $(".pro-gallery-thumbs img").click(function() {
      setImg($(this).attr("src"));
    });



  });
</script>
<div class="pro-gallery-area">
  <div class="pro-gallery-img">
    <a id="product-img" href='##' class = 'cloud-zoom'>
      <img src="${myfn:mainImg(goods.id)}"/>
    </a>
  </div>
  <div class="pro-gallery-nav">
    <a href="javascript:;" class="pro-gallery-back"></a>
    <div class="pro-gallery-thumbs">
      <ul id="pro-gallerys">
        <c:forEach items="${goodsImgs}" var="img" varStatus="status">
          <c:if test="${status.first}">
          <script>
            setImg('${fileServerUrl}/${img.imageUrl}');
          </script>
          </c:if>
        <li>
          <a href="javascript:;"><img src="${fileServerUrl}/${img.imageUrl}" alt=""/></a>
        </li>
        </c:forEach>
      </ul>
    </div>
    <a href="javascript:;" class="pro-gallery-forward" ></a>
  </div>
</div>

